﻿Ext.define('LibOCApp.view.loginForm', {
    extend: 'Ext.form.Panel',
    requires: 'Ext.form.FieldSet',
    alias: 'widget.aliasloginForm',
    config: {
        scrollable: 'vertical'
    },
    initialize: function() {
        
        this.callParent(arguments);

        var entrarBtn = {
            xtype: "button",
            ui: "action",
            text: "Entrar",
            handler: this.onLoginBtnTap,
            scope: this
        };
        
        var limpiarBtn = {
            xtype: "button",
            ui: "action",
            text: "Limpiar"
        };

        var btToolbar = {
            xtype: "toolbar",
            docked: "bottom",
            items: [
                limpiarBtn,
                { xtype: "spacer" },
                entrarBtn
            ]
        };

        var usuarioForm = {
            xtype: 'textfield',
            name: 'usuario',
            label: 'Usuario',
            required: true
        };

        var passForm = {
            xtype: 'passwordfield',
            name: 'clave',
            label: 'Clave',
            required: true
        };

        this.add([
        {
            xtype: 'panel',
            html: '<div><img src="../resources/img/logo.png"></div>',
            height: 50
        },
        {
            xtype: 'fieldset',
            title: 'Crystaling Consulting'
        },
        {
           xtype: 'fieldset',
           items: [usuarioForm, passForm]
        },
        btToolbar]);
    },
    onLoginBtnTap: function() {
        console.log("loginBtnCmd");
        this.fireEvent("loginBtnCmd", this);
    }
});